<template>
  <el-row class="bgi" type="flex" justify="center" align="middle">
    <el-col :span="6" >
      <el-card class="login-card" shadow="hover">
        <div class="login-title">系统登录</div>
        <el-form ref="form" :model="loginUser" label-width="80px">
          <el-form-item label="用户名">
            <el-input
                v-model="loginUser.username"
                placeholder="请输入用户名"
                prefix-icon="el-icon-user">
            </el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input
                v-model="loginUser.password"
                type="password"
                placeholder="请输入密码"
                show-password
                prefix-icon="el-icon-lock">
            </el-input>
          </el-form-item>
<!--          登录按钮放在正中间-->
          <el-form-item>
            <el-button
                type="primary"
                @click="onSubmit"
                style="width: 80%">
              登录
            </el-button>
          </el-form-item>

        </el-form>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
import axios from "axios";

export default {
  name: "login",
  data() {
    return {
      loginUser: {
        username: 'admin',
        password: '123456'
      }
    }
  },
  methods: {
    onSubmit() {
      console.log('submit!');
      axios.post("/user/login",this.loginUser)
          .then(response => {
            console.log(response);
            if (response.code === 200){
              this.$message.success(response.msg);
              this.$store.commit('setUsername',this.loginUser.username);
              this.$store.commit('setToken',response.data);
              this.$router.push("/admin");
            }else {
              this.$message.error(response.msg);
            }
      })
    }
  }
}
</script>

<style scoped>
.bgi {
  background-image: url("../assets/back_ground.jpg");
  background-size: cover;
  height: 100vh;
  margin: 0;
  padding: 0;
}

.login-card {
  border-radius: 10px;
  opacity: 0.9;
  margin: 0;
}

.login-title {
  font-size: 24px;
  color: #409EFF;
  text-align: center;
  margin-bottom: 30px;
  font-weight: bold;
}
</style>